
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>文章类型管理</title>

    <!-- Bootstrap -->
    <link rel="stylesheet" href="../bootstrap/css/bootstrap.css">
    <script src="../js/jquery-3.3.1.min.js"></script>
    <script src="../bootstrap/js/bootstrap.js"></script>


    <style>
        td {
            vertical-align: middle !important;
        }

        .row {
            margin-bottom: 30px;
        }

        th {
            text-align: center;
        }

        #add {
            margin: 0 50px;
        }
    </style>
</head>
<body>
<!-- <h1>你好，世界！</h1> -->
<div class="container-fluid">
    <div class="row">
        <div>
            <ol class="breadcrumb">
                <li><a href="#" class="btn btn-primary btn-sm"
                       role="button"><span class="glyphicon glyphicon-home pull-right" aria-hidden="true"></span>&nbsp;&nbsp;
                    主&nbsp;&nbsp; 页</a></li>
                <li class="active">文章管理</li>
                <li class="active">文章管理</li>
            </ol>
        </div>
    </div>
    <div class="row">
        <div class="col-sm-4 col-sm-offset-6">
            <div class="input-group input-group-sm">
                <span class="input-group-addon">是否可用</span>
                <select class="form-control" id="searchState">
                    <option value="0">可用</option>
                    <option value="1">不可用</option>
                    <option value="-1">全部</option>
                </select>
                <span class="input-group-addon">按名称搜索</span>
                <input type="text" class="form-control" placeholder="输入包含的类型名称" id="searchWord"/>
                <span class="input-group-btn">
                    <button class="btn btn-success" type="button" id="search">
                        <span class="glyphicon glyphicon-search" aria-hidden="true"></span>
                    </button>
                </span>
            </div><!-- /input-group -->
        </div>
    </div>
    <div class="row">
        <div class="col-sm-6 col-sm-offset-2">
            <div class="btn-toolbar">
                <div class="btn-group btn-group-sm">
                    <button class="btn btn-success" id="all-select">全选</button>
                    <button class="btn btn-info" id="inverse-select">反选</button>
                    <button class="btn btn-success" id="notall-select">全不选</button>
                </div>
                <div class="btn-group btn-group-sm">
                    <button class="btn btn-primary" id="add">
                        <span class="glyphicon glyphicon-plus" aria-hidden="true"></span> 添加
                    </button>
                </div>
                <div class="btn-group btn-group-sm">
                    <button class="btn btn-danger" id="batch_delete">
                        <span class="glyphicon glyphicon-trash" aria-hidden="true"></span> 批量删除
                    </button>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-sm-8 col-sm-offset-2">
            <table class="table table-sm table-bordered table-hover text-center">
                <tr>
                    <th><input type="checkbox" id="main-type-id"/></th>
                    <th>文章标题</th>
                    <th>文章简介</th>
                    <th>发布时间</th>
                    <th>状态</th>
                    <th>排序</th>
                    <th>类型</th>
                    <th>操作</th>
                </tr>

                <tr>
                    <td><input type="checkbox" class="type-id"/></td>
                    <td>百花奖</td>
                    <td>影视相关</td>
                    <td>2021-12-11 12:23:10</td>
                    <td>可用</td>
                    <td>1</td>
                    <td>电影</td>
                    <td>
                        <button class="btn btn-danger btn-sm">
                            <!-- typeId -->
                            <span class="glyphicon glyphicon-trash delete" aria-hidden="true"></span> 删除
                        </button>
                        &nbsp;&nbsp;
                        <button class="btn btn-info btn-sm">
                            <span class="glyphicon glyphicon-pencil update" aria-hidden="true"></span> 修改
                        </button>

                        <button class="btn btn-info btn-sm">
                            <span class="glyphicon glyphicon-list-alt detail" aria-hidden="true"></span> 详情
                        </button>
                    </td>
                </tr>
            </table>
        </div>
    </div>
    <div class="row">
        <div class="col-sm-4 col-sm-offset-2">
            <div class="input-group input-group-sm" style="margin-top: 20px">
                <span class="input-group-addon">共计：1页/1条记录，每页</span>
                <select class="form-control">
                    <option value="5" selected>5</option>
                    <option value="10">10</option>
                    <option value="20">20</option>
                </select>
                <span class="input-group-addon">条，跳转到</span>
                <input type="text" class="form-control" placeholder="请输入页码数" id="pages">
                <span class="input-group-btn">
					<button class="btn btn-success btn-sm" type="button" id="jump">跳转
						<span class="glyphicon glyphicon-send" aria-hidden="true"></span></button>
				</span>
            </div>
        </div>
        <div class="col-sm-4 col-sm-offset-1" style="margin-left:13%">
            <nav aria-label="Page navigation">
                <ul class="pagination pagination-sm">
                    <li class="disabled"><a href="#" >首页</a></li>
                    <li class="disabled">
                        <a href="#" aria-label="Previous">
                            <span aria-hidden="true" >&laquo;</span>
                        </a>
                    </li>
                    <li class="active disabled"><a href="#">1</a></li>
                    <li><a href="#">2</a></li>
                    <li><a href="#">3</a></li>
                    <li><a href="#">4</a></li>
                    <li><a href="#">5</a></li>

                    <li>
                        <a href="#" aria-label="Next">
                            <span aria-hidden="true">&raquo;</span>
                        </a>
                    </li>
                    <li><a href="#">尾页</a></li>
                </ul>
            </nav>
        </div>
    </div>
</div>
</body>
</html>